<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
       
    </div>
</body>
<script type="module">
    // 整体载入  => 查看模块内暴露的变量和方法
    import * as Vue from "../js/vue.esm-browser.js";
    console.log(Vue);

    // 按需引入
    import { createApp, ref, reactive, computed, watch, watchEffect } from "../js/vue.esm-browser.js";
    import { toRef } from "../js/vue.esm-browser.js";
    import {  onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "../js/vue.esm-browser.js";


    // 组合式写法 可以理解为是选项式语法的优化, 但是最终还是会被解析成选项式语法
    // 在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性
    let app = createApp({
        setup() {

            
            let count = ref(1);

            /* 
                toRef()  
                 可以将值、refs 或 getters 规范化为 refs (3.3+)。
                 也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
                 
                 
                 可以理解为: 将其他数据转化为ref对象
                 
            
            */


            let a = toRef(1);  // toRef(1)   toRef传入基本数据 => 根据传入的数据创建ref对象
            let count1 = toRef(count); //   toRef传入ref对象 => 直接返回
            let doubleCount = toRef(()=>count.value*2); //   toRef传入getter函数 => 根据传入的函数生成计算属性
            console.log(a);
            console.log(count1 === count);
            console.log(doubleCount.value);

          

            return {
                count
            }
        },

        // 声明周期钩子选项式写法
        mounted() {
            console.log("mounted1", this);
        },
        mounted() {
            console.log("mounted2", this);
        },
    })

    app.mount("#app");
</script>

</html>